<template>
  <div class="trend" ref="parent">
      <template v-show="!!this.attrs.length">
        <div ref="ele" class="canvas-parent">

        </div>
      </template>
      <div v-show="!this.attrs.length" class="error-hints">
          <span>
              {{error_hint}}
          </span>
      </div>
  </div>
</template>

<script>
/* eslint-disable */
// import * as d3 from "d3";
// import * as d3sc from "d3-scale-chromatic";
import _ from "lodash";
import randomstring from "randomstring";
import randomcolor from "randomcolor";
import echarts from "echarts";
import color from "color";
import Debug from "debug";
import { orchid, orange } from "color-name";
const dbg = Debug("Trend.vue");
dbg.enabled = true;

export default {
  name: "TrendLineGraph",
  data() {
    return {
      attrs: [],
      chart: echarts.init(document.createElement("null")),
      line_points: [],
      wugong_data: [],
      selection_test_id_range: [],
      error_hint: "NO DATA",
      brushEndFunc: event => {
        // debugger;
        if (event.batch[0] && event.batch[0].areas[0]) {
          let test_id_range = event.batch[0].areas[0].coordRange;
          this.selection_test_id_range = test_id_range;
          // dbg("brushend-emit!");
          dbg("range:" + event.batch[0].areas[0].range);
          this.brushed_xs = event.batch[0].areas[0].range; //绝对值?
          this.$emit(
            "brush-end",
            test_id_range,
            this.attrs,
            this.calced_lengthOfLinePoints
          );
          this.chart.setOption({
            series: [
              this.opt_Echelon,
              ...this.opt_line_serieses,
              ...this.opt_wugongtui,
              ...this.opt_fake_xAxis_series,
              ...this.opt_belts
            ]
          });
        } else {
          this.selection_test_id_range = [];
          // this.chart.setOption({
          //   series: [...this.opt_line_serieses,...this.opt_wugongtui,...this.opt_belts]
          // });
        }
      },
      brushed_xs: [],
      test_data: [
        //假设i50_max
        {
          test_id: 1,
          value: 0.5
        },
        {
          test_id: 10001,
          value: -0.2
        },
        {
          test_id: 5001,
          value: 1.2
        }
      ]
    };
  },
  created() {},
  props: {
    good_feature_name_func: {
      type: Function
    },
    brush_color: {
      type: String
    }
  },
  computed: {
    starterId() {
      return this.$store.state.starterId;
    },
    test_id_range() {
      return this.$store.state.range;
    },
    trend_colors() {
      return this.$store.state.trend_colors;
    },
    gray_colors() {
      return this.$store.state["gray_colors"];
    },
    font_size() {
      return this.$store.getters["axis_font_size"];
    },
    orderOfMagnitude() {
      return function convertOrderOfMagnitude(n) {
        var order = Math.floor(Math.log(n) / Math.LN10 + 0.000000001); // because float math sucks like that
        return Math.pow(10, order);
      };
    },
    brushEnd_old() {
      let vue = this;
      let s = randomstring.generate();
      return function trendOnBrushEnd(event) {
        if (event.batch[0] && event.batch[0].areas[0]) {
          let test_id_range = event.batch[0].areas[0].coordRange;
          vue.selection_test_id_range = test_id_range;
          dbg("brushend-emit!", s);
          vue.$emit("brush-end", test_id_range, vue.attrs);
        }
      };
    },
    func_colorChangeLightness() {
      /**@param {String} hexColor
       *@param {Number} L */
      function __func_change_color_lightness(hexColor, L) {
        let c = color(hexColor);
        let hslc = c.hsl();
        hslc = hslc.lightness(L);
        return hslc.hex();
      }
      return __func_change_color_lightness;
    },
    func_cv2value() {
      let _this = this;
      /**
       * @param {Number} cv
       * @param {Number} i -- index of attr,也许会随着index而变化
       * @description 如何把CV的值映射到Y轴上的值?
       */
      function __cv(cv, i = 0) {
        // debugger
        // let max_jueduizhi = _.max([_this.MAX_CVs[i],0-_this.MIN_CVs[i]])
        let line_point_values = this.line_points[i].map(e => e["value"]);
        let max_pointvalue = _.max(line_point_values);
        let min_pointvalue = _.min(line_point_values);
        let order = _this.orderOfMagnitude(max_pointvalue - min_pointvalue);
        let s = Math.ceil((max_pointvalue - min_pointvalue) / order) * order;

        return (
          (cv - _this.MIN_CVs[i]) /
          (_this.MAX_CVs[i] - _this.MIN_CVs[i]) *
          s *
          1
        );
      }
      return __cv;
    },
    func_skew2value() {
      let _this = this;
      /**
       * @param {Number} skew
       * @param {Number} i -- index of attr
       */
      function __skew(skew, i = 0) {
        let max_jueduizhi = _.max([_this.MAX_SKEWs[i], -_this.MIN_SKEWs[i]]);
        return skew / max_jueduizhi * _this.ORDERs_OF_LINE[i];
      }
      return __skew;
    },
    OFFSETS() {
      if (this.MIN_MAX_ORDER) {
        return this.MIN_MAX_ORDER.map((mmo, i) => {
          if (mmo.min < 0) {
            let off = -mmo.min;
            off = Math.ceil(off / mmo.order) * mmo.order;
            return off;
          }
          return 0;
        });
      }
      return null;
    },
    MIN_MAX_ORDER() {
      // debugger
      return this.line_points.map((line_arr, line_index) => {
        // debugger
        let minB_Cv = _.min(
          this.wugong_data[line_index].map(w => {
            let e = line_arr.find(x => x["test_id"] == w["test_id"]);
            if (!e) {
              debugger;
              w;
            }
            return e["value"] - this.func_cv2value(w["cv"], line_index) / 2;
          })
        );
        let maxB_Cv = _.max(
          this.wugong_data[line_index].map(w => {
            let e = line_arr.find(x => x["test_id"] == w["test_id"]);
            return e["value"] + this.func_cv2value(w["cv"], line_index) / 2;
          })
        );

        let min = _.min([minB_Cv]);
        let max = _.max([maxB_Cv]);
        return {
          __debug: {
            minB_Cv,
            // minB_skew,
            maxB_Cv
            // maxB_skew
          },
          min: min,
          max: max,
          order: this.orderOfMagnitude(max - min)
        };
      });
    },
    MAX_CVs() {
      return this.wugong_data.map(arr => {
        return _.max(arr.map(e => e["cv"]));
      });
    },
    MIN_CVs() {
      return this.wugong_data.map(arr => {
        return _.min(arr.map(e => e["cv"]));
      });
    },
    MAX_SKEWs() {
      return this.wugong_data.map(arr => {
        return _.max(arr.map(e => e["skew"]));
      });
    },
    MIN_SKEWs() {
      return this.wugong_data.map(arr => {
        return _.min(arr.map(e => e["skew"]));
      });
    },
    __debug_ORDERS_of_LINE() {
      return this.line_points.map((arr, i) => {
        let max = _.max(arr.map(e => e["value"]));
        let min = _.min(arr.map(e => e["value"]));
        return { min, max, order: this.orderOfMagnitude((max - min) * 1.5) };
      });
    },
    ORDERs_OF_LINE() {
      return this.line_points.map((arr, i) => {
        // let max = _.max(arr.map(e => e["value"]));
        // let min = _.min(arr.map(e => e["value"]));
        return this.__debug_ORDERS_of_LINE[i]["order"];
      });
    },
    opt_fake_xAxis_series() {
      let vue = this;
      let calced_lengthOfLinePoints = this.calced_lengthOfLinePoints;
      let gap = parseInt(this.calced_lengthOfLinePoints / 5);
      let order = this.orderOfMagnitude(gap);
      gap = Math.ceil(gap / order) * order;
      let count_tick = parseInt(this.calced_lengthOfLinePoints / gap) + 1;

      return [
        {
          type: "custom",
          name: "",
          yAxisIndex: 0,
          xAxisIndex: 0,
          data: _.range(0, count_tick).map(i => {
            return [i * gap, 0 * 1.5];
          }),
          renderItem: function(params, api) {
            let [valuex, valuey] = [0, 1].map(e => api.value(e));
            let coorded = api.coord([valuex, valuey]);
            let sized = api.size([valuex, valuey]);
            // debugger;
            return {
              type: "group",
              children: [
                {
                  type: "circle",
                  shape: {
                    cx: coorded[0],
                    cy: params.coordSys.y,
                    r: 0
                  },
                  style: {
                    fill: "blue"
                  },
                  comment: "测试效果位置用"
                },
                {
                  type: "line",
                  shape: {
                    x1: coorded[0],
                    y1: params.coordSys.y + params.coordSys.height,
                    x2: coorded[0],
                    y2: params.coordSys.y + params.coordSys.height + 5
                  },
                  style: {
                    // fill: vue.gray_colors[0],
                    stroke: vue.gray_colors[0]
                  },
                  lineWidth: 1
                  //params.coordSys.y
                },
                {
                  type: "text",
                  style: {
                    x: coorded[0],
                    y: params.coordSys.y + params.coordSys.height + 7,
                    text: valuex + "",
                    textAlign: "center",
                    font: `11px "Microsoft Yahei", sans-serif`,
                    fill: vue.gray_colors[1],
                    stroke: vue.gray_colors[1]
                  }
                }
              ]
            };
          }
        },
        {
          type: "custom",
          name: "",
          yAxisIndex: 0,
          xAxisIndex: 0,
          data: [[(count_tick - 1) * gap, 0]],
          renderItem: function(params, api) {
            let [valuex, valuey] = [0, 1].map(e => api.value(e));
            let coorded = api.coord([valuex, valuey]);
            let sized = api.size([valuex, valuey]);
            return {
              type: "group",
              children: [
                {
                  type: "line",
                  shape: {
                    x1: params.coordSys.x,
                    y1: params.coordSys.y + params.coordSys.height,
                    x2: params.coordSys.x + params.coordSys.width,//coorded[0],
                    y2: params.coordSys.y + params.coordSys.height
                  },
                  style: {
                    // fill: vue.gray_colors[0],
                    stroke: vue.gray_colors[0]
                  },
                  lineWidth: 1
                }
              ]
            };
          }
        }
      ];
    },
    opt_yAxis() {
      let vue = this;
      return this.attrs
        .map((attr, i) => {
          return {
            type: "value",
            axisLine: {
              onZero: false,
              lineStyle: {
                color: this.gray_colors[0]
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: this.gray_colors[0],
                type: "dotted",
                opacity: 0.5
              }
            },
            axisTick: {
              inside: false
            },
            gridIndex: 0,
            axisLabel: {
              inside: false,
              color: this.gray_colors[1],
              fontSize: this.font_size,
              formatter: function(value) {
                let after = value - vue.OFFSETS[i];
                if (String(after).length > 5) {
                  after = Number(after).toFixed(
                    String(vue.MIN_MAX_ORDER[i].order).length - 1
                  );
                }
                return after;
              }
            },
            min: (() => {
              let min_max = this.MIN_MAX_ORDER[i];
              try {
                let order = this.ORDERs_OF_LINE[i];
                // debugger;
                return (
                  order * (Math.ceil(min_max.min / order) - 1) + this.OFFSETS[i]
                );
              } catch (e) {
                return null;
              }
            })(),
            max: (() => {
              let min_max = this.MIN_MAX_ORDER[i];
              try {
                let order = this.ORDERs_OF_LINE[i];
                // debugger;
                return (
                  order * (Math.floor(min_max.max / order) + 1) +
                  this.OFFSETS[i]
                );
              } catch (e) {
                return null;
              }
            })(),
            scale: true,
            splitNumber: 3,
            name: `{name|${this.good_feature_name_func(attr)}}`,
            nameGap: 60,
            nameRotate: 90,
            nameLocation: "center",
            nameTextStyle: {
              color: this.trend_colors[i],
              shadowColor: "red",
              shadowBlur: 1,
              fontSize: this.font_size,
              rich: {
                name: {
                  align: "center"
                }
              }
            }
          };
        })
        .concat([
          {
            gridIndex: 1,
            show: false
          }
        ]);
    },
    opt_line_serieses() {
      let vue = this;
      return this.line_points.map((points, i) => {
        return {
          name: this.attrs[i],
          type: "line",
          data: points.map(e => [e.test_id, e.value + this.OFFSETS[i]]),
          smooth: true,
          itemStyle: {
            color: function(params) {
              let dataIdx = params.dataIndex;
              let gap = parseInt(points.length / 10);
              if (dataIdx % gap == 0) {
                return vue.trend_colors[i];
              } else {
                return "transparent";
              }
            },
            borderWidth: 0
          },
          yAxisIndex: i,
          symbol: i % 2 ? "rect" : "triangle",
          showSymbol: false,
          symbolSize: 10,
          showAllSymbol: false,
          lineStyle: {
            type: "solid",
            shadowColor: "rgba(0, 0, 0, 0.5)",
            width: 1.5,
            shadowBlur: 0,
            color: this.trend_colors[i]
          }
        };
      });
      //
    },
    opt_belts() {
      return _.flatten(
        this.line_points.map((line_arr, line_index) => {
          return [
            {
              type: "line",
              name: this.attrs[line_index],
              stack: "belt" + this.attrs[line_index],
              data: ($ => {
                let data = this.wugong_data[line_index].map((w, i) => {
                  let value =
                    line_arr.find(x => x["test_id"] == w["test_id"])["value"] -
                    this.func_cv2value(w["cv"], line_index) / 2;
                  return [w["test_id"], value + this.OFFSETS[line_index]];
                });
                return data;
              })(),
              symbolSize: 0,
              yAxisIndex: line_index,
              areaStyle: {
                color: "transparent"
              },
              itemStyle: {
                color: this.trend_colors[line_index]
              },
              lineStyle: {
                color: this.func_colorChangeLightness(
                  this.trend_colors[line_index],
                  71
                ),
                opacity: 0.2
              },
              comment: "下边界"
            }
          ].concat([
            {
              type: "line",
              name: this.attrs[line_index],
              stack: "belt" + this.attrs[line_index],
              data: ($ => {
                let data = this.wugong_data[line_index].map((w, i) => {
                  let value = this.func_cv2value(w["cv"], line_index);
                  return [w["test_id"], value];
                });
                return data;
              })(),
              symbolSize: 0,
              yAxisIndex: line_index,
              areaStyle: {
                color: this.func_colorChangeLightness(
                  this.trend_colors[line_index],
                  71
                ),
                opacity: 0.2
              },
              itemStyle: {
                color: this.trend_colors[line_index]
              },
              lineStyle: {
                color: this.func_colorChangeLightness(
                  this.trend_colors[line_index],
                  71
                ),
                opacity: 0.2
              },
              comment: "上边界"
            }
          ]);
        })
      );
      //
    },
    opt_wugongtui() {
      let vue = this;
      return this.line_points.map((line_arr, line_index) => {
        return {
          type: "custom",
          name: this.attrs[line_index],
          yAxisIndex: line_index,
          data: this.wugong_data[line_index]
            .map((w, i) => {
              let testid = w["test_id"];
              let base_value = line_arr.find(x => x["test_id"] == testid)[
                "value"
              ];
              let skew_value = 0.5 * vue.func_cv2value(w["cv"], line_index);
              if (w["skew"] < 0) {
                skew_value = skew_value * -1;
              }
              if (w["skew"] == 0) {
                skew_value = 0;
              }
              return [
                testid,
                base_value + this.OFFSETS[line_index],
                skew_value,
                w["skew"]
              ];
            })
            .filter((e, i) => i % 5),
          renderItem: function(params, api) {
            let [value0, value1, value2, value3] = [0, 1, 2, 3].map(e =>
              api.value(e)
            );
            let coorded1 = api.coord([value0, value1]);
            let coorded2 = api.coord([value0, value1 + value2]);
            let sized = api.size([value0, value1]);
            return {
              type: "group",
              children: [
                {
                  type: "circle",
                  shape: {
                    cx: coorded1[0],
                    cy: coorded1[1],
                    r: 1
                  },
                  style: {
                    fill: vue.trend_colors[line_index]
                  }
                },
                {
                  type: "line",
                  shape: {
                    x1: coorded1[0],
                    y1: coorded1[1],
                    x2: coorded1[0],
                    y2: coorded2[1]
                  },
                  style: {
                    fill: vue.trend_colors[line_index],
                    stroke:
                      line_index == 0
                        ? "rgba(69, 243, 156, 0.3)"
                        : "rgba(212, 109, 106, 0.3)" ||
                          vue.func_colorChangeLightness(
                            vue.trend_colors[line_index],
                            61
                          ),
                    lineWidth: ($ => {
                      let skew = value3;
                      let max_skew = vue.MAX_SKEWs[line_index];
                      let min_skew = vue.MIN_SKEWs[line_index];
                      let width =
                        (skew - min_skew) / (max_skew - min_skew) * 3 + 0.5;
                      if (width < 0) {
                        debugger;
                      }
                      return width;
                    })()
                  }
                }
              ]
            };
          }
        };

      });
      //
    },
    calced_lengthOfLinePoints() {
      let lengthOfLinePoints;
      try {
        if (this.line_points.length) {
          let max_test_id = this.line_points[0][this.line_points[0].length - 1][
            "test_id"
          ];
          let order = this.orderOfMagnitude(max_test_id);

          lengthOfLinePoints = max_test_id;
        } else {
          lengthOfLinePoints = 250001;
        }
        return lengthOfLinePoints;
      } catch (e) {
        return 1;
      }
    },
    opt_xAxis: function() {
      return [
        {
          type: "category",
          show: false,
          data: ($ => {
            if (this.line_points.length) {
              if (this.line_points[0].length >= 2) {
                let arr = this.line_points[0];
                let last = arr[arr.length - 1];
                let order = this.orderOfMagnitude(
                  last["test_id"] - arr[arr.length - 2]["test_id"]
                );
                let end_test_id = Math.ceil(last["test_id"] / order) * order;
                let start_test_id =
                  Math.floor(arr[0]["test_id"] / order) * order;
                return _.range(start_test_id, end_test_id);
              }
            }

            return _.range(0, this.calced_lengthOfLinePoints);
          })(),
          splitLine: {
            show: false
          },
          gridIndex: 0,
          axisLine: {
            onZero: false,
            lineStyle: {
              fontSize: 12,
              color: this.gray_colors[0]
            }
          },
          axisTick: {
            // interval: 10000,
            alignWithLabel: true //保证刻度线和标签对齐
          },
          axisLabel: {
            // interval: 10000,
            color: this.gray_colors[1],
            fontSize: this.font_size
            // interval: 49999
          },
          name: "Test No.",
          nameGap: 34,
          nameLocation: "center",
          nameTextStyle: {
            color: this.gray_colors[1],
            textShadowColor: "transparent",
            textShadowBlur: 0,
            textShadowOffsetY: 14,
            fontSize: this.font_size
          },

          position: "bottom"
        },
        {
          type: "category",
          gridIndex: 1,
          data: _.range(0, this.calced_lengthOfLinePoints)
        }
      ];
    },
    opt_Echelon() {
      let vue = this;
      if (vue.selection_test_id_range.length == 2) {
        return {
          name: "",
          type: "custom",
          data: [0],
          xAxisIndex: 1,
          yAxisIndex: this.opt_yAxis.length - 1,
          renderItem: function renderEchelon(params, api) {
            // debugger
            if (api.coord) {
              let x1 = api.coord([vue.selection_test_id_range[0], 0])[0];
              let x2 = api.coord([vue.selection_test_id_range[1], 0])[0];
              return {
                type: "polygon",
                shape: {
                  points: [
                    [x1, params.coordSys.y],
                    [x2, params.coordSys.y],
                    [
                      params.coordSys.x + params.coordSys.width,
                      params.coordSys.y + params.coordSys.height
                    ],
                    [
                      params.coordSys.x,
                      params.coordSys.y + params.coordSys.height
                    ]
                  ]
                },
                style: {
                  fill: vue.brush_color,
                  stroke: "rgba(120,140,180,0.8)",
                  lineWidth: 1
                }
              };
            } else {
              debugger;
            }
          }
        };
      } else {
        return {};
      }
    },
    opt_echarts() {
      let vue = this;
      return {
        animation: false,
        grid: [
          {
            left: 100,
            right: 100,
            top: 40,
            bottom: 60,
            show: false
          },
          {
            left: 100,
            right: 100,
            // top: 174,
            height: 60 + 10,
            bottom: -10,
            show: false
          }
        ],
        legend: {
          top: 10,
          formatter: function(param) {
            return vue.good_feature_name_func(param);
          }
        },
        tooltip: {
          trigger: "axis",
          formatter: function(_params, ticket, callback) {
            let params = _params.filter(e => e["seriesType"] == "line");
            if (params.length) {
              let test_id = _params[0] && _params[0].data[0];
              /**@todo 由于OFFSET造成的显示错误需要等待修正 */
              // debugger;
              let attr_name_and_value = params
                .filter(p => {
                  let seriesId = p["seriesId"]; //`[未知字符]i30_extremum[未知字符]0`;
                  let matched = seriesId.match(/.*([0]$)/); //表示蜈蚣的series的id后面是1或者2
                  return !!matched;
                })
                .map((e, i) => {
                  let attr_name = e.seriesName;
                  let attr_index = vue.attrs.findIndex(e => e == attr_name);
                  let OFFSET = vue.OFFSETS[attr_index] || 0;
                  let value = String(e.data[1]);
                  let func = v => {
                    v = String(v);
                    let dot = v.indexOf(".");
                    if (dot && v.length - dot > 3) {
                      v = Number(v - OFFSET).toFixed(3);
                    }
                    return v;
                  };

                  value = func(value);

                  let wugong_data = _.findLast(
                    vue.wugong_data[i],
                    w => w["test_id"] <= test_id
                  );
                  if (wugong_data && wugong_data["cv"] && wugong_data["skew"]) {
                  }

                  let func2 = function 精确到小数点后三位(num){
                    return Math.round(num * 1000) / 1000;
                  }

                  return `${vue.good_feature_name_func(
                    attr_name
                  )} : ${value}<br>
                  ${
                    wugong_data
                      ? `CV : ${func2(wugong_data["cv"])}<br> SKEW : ${
                          func2(wugong_data["skew"])
                        }`
                      : ""
                  }
                  `;
                });

              let date = (() => {
                let find_date = vue.line_points[0].find(
                  e => e.test_id == test_id
                );
                if (find_date) {
                  return find_date["date"];
                } else {
                  return null;
                }
              })();
              // debugger
              let date_str = date ? `<br>Date : ${date}` : "";
              return `Test No. :${test_id}${date_str}<br><br>${attr_name_and_value.join(
                "<br><br>"
              )}`;
            }
          },
          extraCssText: "text-align: left;"
        },
        xAxis: this.opt_xAxis,
        yAxis: this.opt_yAxis,
        series: [
          ...this.opt_line_serieses,
          ...this.opt_belts,
          ...this.opt_wugongtui,
          ...this.opt_fake_xAxis_series
          // this.opt_Echelon
          // ...this.opt_std_series,
          // ...this.opt_std_line_series,
          // ...this.opt_test_vertical_line_series,
          // ...this.opt_test_random_marks_series
        ],
        toolbox: {
          show: true
          // feature: {
          //   magicType: { show: true, type: ["stack", "tiled"] },
          //   saveAsImage: { show: true }
          // }
        },
        brush: {
          toolbox: ["lineX", "clear"],
          xAxisIndex: [0],
          yAxisIndex: [0],
          seriesIndex: 0,
          throttleType: "debounce",
          throttleDelay: 1000,
          brushStyle: {
            color: this.brush_color
          }
        }
      };
    }
  },
  mounted() {
    let chart = echarts.init(this.$refs["ele"]);
    this.chart = chart;
    this.chart.on("brushselected", this.brushEndFunc.bind(this));
  },
  methods: {
    /**@param {{group_name:String,attribute_names:String[]}[]} attr_groups*/
    updateAttributes: async function(attr_groups) {
      this.raw_input = attr_groups;
      this.line_points = [];
      this.glitch = [];
      // debugger;
      let attrs = _.flatten(_.map(attr_groups, group => group.attribute_names));
      if (attrs.length == 0) {
        return (this.attrs = []);
      }
      if (attrs.length >= 2) {
        attrs = [attrs[0], attrs[1]];
      } else {
        attrs = [attrs[0]];
      }

      this.attrs = attrs;
      this.chart.showLoading();
      // 载入特征趋势线数据
      let line_requests_funcs = attrs.map(attr => () =>
        this.$http.get("/starter/feature/trend/", {
          params: {
            starterId: this.starterId,
            attrs: attr
          }
        })
      );
      let line_requests = [];
      for (let func of line_requests_funcs) {
        let req = func();
        line_requests.push(req);
        await req;
      }
      let line_p = Promise.all(line_requests).catch(err => {
        this.$Notice.error({
          title: "HTTP request error",
          duration: 1000
        });
        console.error(err);
        this.chart.hideLoading();
      });
      line_p.then(([...resps]) => {
        let points = resps.map(
          (respTrend, i) =>
            respTrend.data["attributes_data"][attrs[i]]["points"]
        );
        let wugongs = resps.map(
          (respTrend, i) =>
            respTrend.data["attributes_data"][attrs[i]]["centipede"]
        );

        /**@description 蜈蚣数据 最后面补一个0 */
        wugongs.forEach((w_arr, i) => {
          if (points[i].length) {
            let test_id = points[i][points[i].length - 1]["test_id"];
            let lasti = w_arr.length - 1;
            w_arr.push({
              cv: w_arr[lasti]['cv'],
              skew: w_arr[lasti]['skew'],
              test_id: test_id
            });
          }
        });
        this.line_points = points;
        this.wugong_data = wugongs;
      });

      Promise.all([...line_requests]).then(() => {
        this.chart.hideLoading();
      });
    }
  },
  watch: {
    opt_echarts(val) {
      try {
        this.chart.clear();
        this.chart.setOption(val);
        // this.chart.on("brushselected", this.brushEnd);
      } catch (makePanelOptsError) {
        console.warn("Echarts 的 BUG吧这是");
      }
    },
    starterId() {
      this.attrs = [];
      this.line_points = [];
      this.selection_test_id_range = [];
    }
  }
};
</script>

<style lang="scss" scoped>
.trend {
  $height: 234px;
  height: $height;
  position: relative;
  .canvas-parent {
    width: 1311px;
    height: $height;
  }
  .error-hints {
    font-size: 50px;
    color: #f7f7f7;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 1px 1px 2px black;
  }
  svg {
    line.borderline {
      stroke: black;
      stroke-width: 1px;
      stroke-opacity: 0.2;
    }
  }
}
</style>
